<template>
  <div>
    <navBar title="任务详情" />

    <div class="pageMain">
      <van-row justify="end">
        <van-col span="24" style="text-align: right;">
          <van-button plain hairline type="primary" size="small" @click="getDataList()">
            <i class="ri-restart-line"></i>
          </van-button>
        </van-col>
      </van-row>
      <el-table :data="tableData" border>
        <el-table-column type="index" label="序号" width="60" align="center"/>
        <el-table-column prop="taskCode" label="子任务编号" sortable align="center"/>
        <el-table-column prop="electricCoreCode" label="电芯编号" align="center"/>
        <el-table-column prop="electricCoreTypeName" label="电芯型号" align="center"/>
        <el-table-column prop="statusText" label="任务状态" sortable align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <van-button type="primary" v-if="scope.row.status !=3" 
              class="btn" 
              @click="handleEdit(scope.$index, scope.row)">执行
            </van-button>
            <van-button type="primary" v-if="scope.row.status ==3" 
              class="btn" 
              @click="handleEdit(scope.$index, scope.row)">查看
            </van-button>
            <van-button type="danger" class="btn" v-if="scope.row.status !== '3'" @click="resetSubTask(scope.$index, scope.row)">清空</van-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="paginationCss">
        <van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" :show-page-size="pageSize" force-ellipses 
        @change="getDataList"/>
      </div>
    </div>

  </div>
</template>
<script>
  import { taskInfo ,subtaskExecute, resetSubTask} from "@/apis/index";
  import navBar from '../../components/navBar/index.vue'
  import { Toast } from "vant";



  export default {
    name: "Home",
    data () {
      return {
        tableData:[],
        pageSize:6,
        total:1,
        currentPage:1,
        serachParam:{
          pageNum: 1,
          pageSize: 6,
          mainTaskId:null
        },
        mainTaskInfo:{}
       
      };
    },
    components: { navBar },
    mounted () {
      if(this.$route.params){
        this.mainTaskInfo = this.$route.params;
      }else if(sessionStorage.getItem('mainTaskInfo')){
        this.mainTaskInfo = JSON.parse(sessionStorage.getItem('mainTaskInfo'));
      }
      this.serachParam.mainTaskId = this.$route.query.mainTaskId || null;
      this.getDataList();
    },
    created () { },
    methods: {
      getDataList(){
        this.serachParam.pageNum = this.currentPage
        taskInfo({ ...this.serachParam }).then(res=>{
            if (res.code === 1) {
              this.tableData = res.data.list;
              this.total = res.data.total;
            }
        });
      },

      handleEdit(ind,item){
        sessionStorage.setItem('subTaskInfo',JSON.stringify(item));
        this.$router.push({
          name: 'operation',
          params: {
            mainTaskInfo:JSON.stringify(this.mainTaskInfo),
            subTaskInfo:JSON.stringify(item)
          },
          query: {
            taskId: this.serachParam.mainTaskId,
            subtaskId:item.id
          },
        });
      },
      resetSubTask(ind, item) {
        resetSubTask({ subTaskId: item.id }).then(res=>{
            if (res.code === 1) {
              Toast("任务清空成功");
              this.getDataList();
            }
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .btn {
    height: 32px !important;
    margin-right: 10px;
  }

  .btn:last-child {
    margin-right: 0;
  }


  .paginationCss {
    margin-top: 30px;
  }
</style>